<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <h3 class="form-setting-panel-title">{{field.displayName}}
      <el-tooltip placement="top" :content="$t('common.form.tip.faultLibrary.tips1')">
        <i class="iconfont icon-question"></i>
      </el-tooltip>
    </h3> 
    <!-- end 标题 -->
    <p class="form-design-warning">{{$t('common.form.tip.systemTemplateTips')}}</p>
    <h3>{{$t('common.base.rulerTip')}}</h3>
    <div>{{$t('common.form.tip.faultLibrary.tips2')}}</div>
    <div class="form-setting-group">
      <div>
        <el-checkbox v-model="faultLibraryOption.productType" :disabled="true">{{$t('common.form.preview.faultLibrary.concatLabel1')}}</el-checkbox>
        <div class="form-setting-group-tips">{{$t('common.form.tip.faultLibrary.tips3')}}</div>
        <div class="form-setting-group-tips">{{$t('common.form.tip.faultLibrary.tips4')}}</div>
      </div>
      <div>
        <el-checkbox v-model="faultLibraryOption.faultScene" :disabled="true">{{$t('common.form.preview.faultLibrary.concatLabel2')}}</el-checkbox>
        <div class="form-setting-group-tips">{{$t('common.form.tip.faultLibrary.tips5')}}</div>
      </div>
      <div>
        <el-checkbox v-model="faultLibraryOption.faultDetails" :disabled="true">{{$t('common.form.preview.faultLibrary.concatLabel3')}}</el-checkbox>
        <div class="form-setting-group-tips">{{$t('common.form.tip.faultLibrary.tips6')}}</div>
      </div>
      <div>
        <el-checkbox v-model="faultLibraryOption.faultReason">{{$t('common.form.preview.faultLibrary.concatLabel4')}}</el-checkbox>
      </div>
      <div>
        <el-checkbox v-model="faultLibraryOption.solution">{{$t('common.form.preview.faultLibrary.concatLabel5')}}</el-checkbox>
        <div class="form-setting-group-tips">{{$t('common.form.tip.faultLibrary.tips7')}}</div>
      </div>
      <div>
        <el-checkbox v-model="faultLibraryOption.budgetAmount">{{$t('common.form.preview.faultLibrary.concatLabel6')}}</el-checkbox>
        <div class="form-setting-group-tips">{{$t('common.form.tip.faultLibrary.tips8')}}</div>
      </div>
    </div>

    <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item" v-if="isTaskModeForVisibleCustomer">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting'
import { settingProps } from '@src/component/form/components/props';

export default {
  name: 'form-faultlibrary-setting',
  mixins: [SettingMixin],
  props: settingProps,
  computed: {
    faultLibraryOption() {
      return this.field.setting.faultLibraryOption || {}
    }
  },
  methods: {
    updateForDom(event) {
      let el = event.target
      let prop = el.dataset.prop
      let value = el.value
      this.update(value, prop)
    },
    update(value, prop) {
      this.$emit('input', { value, prop })
    }
  }
}
</script>
<style scoped>
.form-setting-group-tips {
  padding: 4px 0;
  color: #999;
  font-size: 12px;
}
</style>